<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>chart</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</head>
	<body style="font-size: 13px;">
		<div>
			<div id="div1"></div>
			<div>
				<button id="btn1">-1-</button>
				<button id="btn2">-2-</button>
				<button id="btn3">-3-</button>
			</div>
		</div>
		
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/Raphael-2.1.0.js"></script>
		<script type="text/javascript" src="js/plugin/jquery_chart-1.1.0.js"></script>
		<script type="text/javascript">
			Raphael.fn.arrow = function (x, y) {
                return this.path(["M", x, y] + "m-10-10l20,0 0-6 10,16 -10,16 0-6 -20,0 0,6 -10-16 10-16z").attr({fill: "#F00", stroke: "none", "stroke-dasharray": "-", "fill-opacity": 0.8});
            };
			$(document).ready(function() {
				
				//$("div1").chart({nx:20,ny:12,ps:[[1,5],[2,1],[3,2],[4,3],[5,5]]});
				//var paper = $("div1").chart({data:{"01 02":2,"01 03":0,"01 04":0,"01 05":1,"01 06":1,"01 07":1,"01 08":1,"01 09":0,"01 10":2,"01 11":0,"02 03":2,"02 04":1,"02 05":1,"02 06":2,"02 07":1,"02 08":2,"02 09":2,"02 10":2,"02 11":1,"03 04":2,"03 05":1,"03 06":1,"03 07":0,"03 08":1,"03 09":3,"03 10":1}});
				/*
				paper.text(190, 190, "Yay!").attr({font: '10px "Helvetica Neue", Arial', fill: "none", stroke: "#666", "stroke-dasharray": "-"});
                paper.text(190, 190, "Yay!").attr({font: '10px "Helvetica Neue", Arial', fill: "none", stroke: "#666", "stroke-dasharray": "-", transform: "t300,0r360s3"});
                var el = paper.text(190, 190, "Yay!").attr({font: '10px "Helvetica Neue", Arial', fill: "#0F0"}),
                	elattrs = [{transform: "t300,0r360s3"}, {transform: ""}],
                    now = 1;
                paper.arrow(300, 190).click(function () {
                    el.stop().animate(elattrs[+(now = !now)], 2000);
                });
                
				var el1 = paper.rect(100, 50, 120, 220).attr({stroke: "#0F0", "stroke-width": 2, transform: "r30"});
				el1.animate({transform: "r90t100,0"}, 5000);
				var el2 = paper.rect(100, 100, 120, 220).attr({stroke: "#F00", "stroke-width": 2, transform: "r30"});
				el2.animate({transform: "r90T100,0"}, 5000);
				*/
				//paper.text(100, 100, "01 02 03").attr({stroke: "#F00", "stroke-width": 1, transform: "r-50"});
				
				//var el2 = paper.rect(20, 20, 160, 160).attr({stroke: "#00F", "stroke-width": 2});
				//el2.animate({transform: "t100,100r45t-100,0"}, 1000);
				
				//el2.animate(Raphael.animation({transform: "t100,100"}, 1000));
				//el2.animate(Raphael.animation({transform: "...r45"}, 1000).delay(1000));
				//el2.animate(Raphael.animation({transform: "...t-100,0"}, 1000).delay(2000));
				
				/*var x = 600, y = 190;
				paper.circle(x, y, 2).attr({stroke: "#F00"});
				paper.circle(x-10, y-10, 3).attr({stroke: "#F00"});
				paper.circle(x+20, y+0, 3).attr({stroke: "#0F0"});
				paper.circle(x+0, y-6, 3).attr({stroke: "#00F"});
				paper.circle(x+10, y+16, 1);
				paper.circle(x-10, y+16, 1);
				paper.circle(x+0, y-6, 1);
				paper.circle(x-20, y+0, 1);
				paper.circle(x+0, y+6, 1);
				paper.circle(x-10, y-16, 1);
				paper.circle(x+10, y-16, 1);
				paper.path(["M", x, y] + "m-10-10l20,0 0-6 10,16 -10,16 0-6 -20,0 0,6 -10-16 10-16z").attr({stroke: "#F00"});
				*/
				/*
				var x = 100, y = 200;
				paper.circle(x, y, 5).attr({stroke: "#F00"});
				paper.circle(x-50, y-50, 3).attr({stroke: "#0F0"});
				//paper.circle(x+50, y-50, 3).attr({stroke: "#0F0"});
				//paper.circle(x+50, y+50, 3).attr({stroke: "#0F0"});
				//paper.circle(x-50, y+50, 3).attr({stroke: "#0F0"});
				paper.path(["M", x, y] + "m-50-50l50,-50 50,50 -50,50z").attr({stroke: "#F00"});
				*/
				
				
				
				
				var paper = Raphael($("#div1")[0], 200, 200);
				paper.circle(50, 50, 20).attr({stroke: "#F00"});
				
				
				
				
				
				
			});
		</script>
	</body>
</html>
